
<template>
  <div class="myinfo">
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div
            style="
              margin-top: 20%;
              font-weight: 700;
              font-size: 18px;
              color: rgb(64, 158, 255);
            "
          >
            个人信息
          </div>
          <el-upload
            style="margin-left: 40px; margin-top: 25px"
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadPicture"
          >
            <img :src="form.userHeadImg" class="avatar" />
          </el-upload>
        </div>
      </el-col>

      <el-col :span="9"
        ><div class="grid-content bg-purple-light" style="margin-top: 30%">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="学员名字">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="form.deptId" placeholder="请选择部门">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="form.userPosition"></el-input>
            </el-form-item>
            <el-form-item label="公司">
              <el-input v-model="form.userCompany"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.userTelephone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址">
              <el-input v-model="form.userEmail"></el-input>
            </el-form-item>

            <el-form-item style="text-align: center">
              <el-button type="primary" @click="onSubmit">修改</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >

      <el-col :span="6"> <div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>



<script>
import { findUserById } from "@/api/user";
import { updateUser } from "@/api/user";
import { uploadPicture } from "@/api/user";
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: "行政部",
        },
        {
          value: 2,
          label: "财务部",
        },
        {
          value: 3,
          label: "市场部",
        },
        {
          value: 4,
          label: "人力资源部",
        },
        {
          value: 5,
          label: "研发部",
        },
        {
          value: 6,
          label: "法务部",
        },
      ],
      form: {
        userId: "",
        userName: "",
        deptId: "",
        userPosition: "",
        userCompany: "",
        userTelephone: "",
        userEmail: "",
        userRole: "",
        userHeadImg: "",
      },
      formInline: {
        userId: this.$store.getters.userId,
        userName: "frank",
      },
    };
  },

  created() {
    this.getData();
  },

  methods: {
    //将个人信息显示在首页
    getData() {
      findUserById(this.formInline.userId)
        .then((res) => {
          console.log(res);
          this.form.userId = res.data.userId;
          this.form.userName = res.data.userName;
          this.form.deptId = Number(res.data.deptId);
          this.form.userRole = res.data.userRole;
          this.form.userTelephone = res.data.userTelephone;
          this.form.userEmail = res.data.userEmail;
          this.form.userCompany = res.data.userCompany;
          this.form.userPosition = res.data.userPosition;
          this.form.userHeadImg = res.data.userHeadImg;
        })
        .catch((err) => {
          console.log(err);
          alert("后端有错！");
        });
    },

    //头像上传
    uploadPicture(param) {
      const formdata = new FormData();
      formdata.append("userId", this.form.userId);
      formdata.append("file", param.file);
      uploadPicture(formdata).then((res) => {
        if (res.code == 200) {
          this.updatesuccess(res.message);
          this.form.userHeadImg = res.data;
          console.log(res);
        } 
      });
    },

    //修改个人中心提交方法
    onSubmit() {
      updateUser(this.form).then((res) => {
        if (res.code == 200) {
          this.updatesuccess(res.message);
        } 
      });
    },
    //消息提示
    updatesuccess(message) {
      this.$message({
        message: message,
        type: "success",
      });
    },
   
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.myinfo {
  width: 80%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  height: 100%;
}
.myinfo .el-row {
  justify-content: space-between;
  padding: 0 20px;
}
.myinfo .avatar-box {
  margin-top: 50px;
  margin-left: 50px;
}
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar-box .el-button {
  margin-top: 20px;
}
.myinfo .el-avatar img {
  width: 160px !important;
  height: 220px !important;
  object-fit: none !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>